<template>
  <!-- boss总量页 -->
  <div class="totalSearch">
    <el-card>

      <!-- 搜索 -->
      <el-form :inline="true" :model="productData2" class="demo-form-inline">
        <el-form-item label="统计方式">
          <el-select size="small" v-model="productData2.scope" placeholder="请选择" @change="changeSelect2()">
            <el-option label="按天查询" value="day"> </el-option>
            <el-option label="按月查询" value="month"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-select size="small" v-model="productData2.username" placeholder="用户名称" clearable>
            <el-option v-for="item in useroptions" :key="item.id" :label="item.username" :value="item.username">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属省份">
          <el-select size="small" placeholder="选择省份" clearable v-model="productData2.province">
            <el-option label="四川流量" value="四川"> </el-option>
            <el-option label="湖南流量" value="湖南"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="选择日期" v-if="timeShow">
          <el-date-picker size="small" v-model="productData2.startTime" type="date" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="timeShow">
          <el-date-picker size="small" v-model="productData2.endTime" type="date" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择月份" v-if="!timeShow">
          <el-date-picker style="width: 200px;" size="small" v-model="productData2.startTime" type="month"
            placeholder="选择月份" format="yyyy 年 MM 月" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <br />
        <el-form-item label="产品编号">
          <el-input size="small" v-model="productData2.productId" placeholder="请输入产品编号查询" clearable></el-input>
        </el-form-item>
        <el-button type="primary" size="small" @click="getproductdata2()">查询</el-button>
      </el-form>
      <div class="card" v-if="subnum">
        <!-- <div class="card" v-if="false"> -->
        <div class="card1">
          <span>成功调用量</span>
          <hr color="#F8F8F8" />
          {{ sdata.success }}次
        </div>
        <div v-if="this.$store.state.user.role == 'admin'" class="card1">
          <span>计费成功调用量</span>
          <hr color="#F8F8F8" />
          {{ sdata.success }}次
        </div>
        <div class="card1">
          <span>失败调用量</span>
          <hr color="#F8F8F8" />
          {{ sdata.error }}次
        </div>
        <br />
        <div class="card1">
          <span>总调用量</span>
          <hr color="#F8F8F8" />
          {{ sdata.all }} 次
        </div>
        <div class="card1">
          <span>总消费[参考值]
            <hr color="#F8F8F8" />
            ￥
          </span>
          {{ sdata.money }}
        </div>

        <div class="card1">
          <span>成功率</span>
          <hr color="#F8F8F8" />
          {{ String(sdata.successPro * 100).slice(0, 5) }}%
        </div>
      </div>
      <!-- 表格内容 -->
      <el-table v-loading="loadingTable1" id="legacy1" ref="multipleTable" :data="ndata2.pageList" tooltip-effect="dark"
        style="width: 100%" border>
        <el-table-column type="index" align="center" width="50">
        </el-table-column>
        <el-table-column label="创建时间" width="120" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="timeShow">{{
            scope.row.createTime
            }}</span>
            <span style="margin-left: 10px" v-if="!timeShow">{{
            scope.row.createTime.slice(0, 7)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="120" align="center">
        </el-table-column>
        <el-table-column prop="productId" label="产品编号" width="230" align="center">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="230" align="center">
        </el-table-column>
        <el-table-column prop="clientCount" label="总调用量" align="center">
        </el-table-column>
        <el-table-column label="消费" align="center" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
            scope.row.consume | currency("￥")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="successCount" label="成功调用量" align="center">
        </el-table-column>
        <el-table-column prop="errorCount" label="失败调用量" align="center">
        </el-table-column>
        <el-table-column label="成功率" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.successPro }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="失败率" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.errorPro }}%</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- currentPage -->
      <el-pagination background @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
        :page-sizes="[10, 20, 50, 100]" :page-size="10" :current-page="productData2.pageNum"
        layout="total, sizes, prev, pager, next, jumper" :total="ndata2.totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { apiScopeCount, orderQuery, getUsername } from "@/api/order";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {

  data() {
    return {
      useroptions: [],
      sdata: {},
      subnum: false,
      loadingTable1: false,
      //调用量 搜索条件
      productData: {
        scope: "month",
        startTime: "",
        endTime: "",
      },
      //   数据
      ndata: {},
      //   统计方式
      options: [
        {
          value: "day",
          label: "按天查询",
        },
        {
          value: "month",
          label: "按月查询",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() - 86400000 > Date.now();
        },
      },
      //  详单查询  搜索条件
      orderSearchData: {
        scope: "",
        startTime: "",
        endTime: "",
      },
      //   数据
      orderData: {},
      // 日期显示与隐藏
      timeShow: false,
      //调用量2 搜索条件
      productData2: {
        username: "",
        scope: "month",
        startTime: "",
        endTime: "",
        province: "",
      },
      //   数据
      ndata2: {},
    };
  },
  async created() {
    this.getproductdata2()
    let ftime = new Date();
    let a = ftime.getFullYear()
    let b = ftime.getMonth() + 1
    let c = ftime.getDate()
    let ftimes = `${a}-${b}-1 00:00:00`

    this.productData2.startTime = ftimes
    let username = window.localStorage.getItem("username");
    let res = await getUsername();
    this.useroptions = res.data;
    console.log(11111);
  },
  methods: {
    //   下拉框
    changeSelect2() {
      if (this.productData2.scope == "month") {
        this.timeShow = false;
      } else {
        this.timeShow = true;
      }
    },
    // 分页查询
    async handleSizeChange2(val) {
      this.productData2.pageSize = val;
      this.priceData2();
    },
    async handleCurrentChange2(val) {
      this.productData2.pageNum = val;
      this.priceData2();
    },
    // 调用量2 获取数据
    async priceData2() {
      this.loadingTable1 = true;
      this.subnum = false;
      let res = await apiScopeCount(this.productData2);
      if (res.data) {
        this.subnum = true;
        this.ndata2 = res.data;
        this.sdata = res;
        this.loadingTable1 = false;
      } else {
        this.loadingTable1 = false;
        this.ndata2 = [];
        this.subnum = false;
      }
    },
    // 搜索
    getproductdata2: debounce(function () {
      this.productData2.pageNum = 1;
      this.priceData2();
    }, 500),
  },
};
</script>


<style lang="scss" scoped>
.statistics {
  .data {
    display: inline-block;
    height: 40px;
    vertical-align: bottom;
    text-align: center;
    color: rgb(224, 103, 103);
    font-size: 14px;
    box-sizing: border-box;
    margin-left: 10px;
  }
}
</style>
<style scoped>
.card {
  width: 100%;
  text-align: center;
}

.card1 {
  display: inline-block;
  white-space: nowrap;
  width: 33%;
  font-size: 1rem;
  font-family: "Franklin Gothic small", "Arial Narrow", Arial, sans-serif;
  background-color: #fff;
  color: #409eff;
}

.card1 span {
  color: #666;
  font-family: serif;
  font-weight: 600;
}
</style>